<template>
  <ul v-show="isShow" ref="menu" class="right-key-menu" :style="{left:x+'px',top:y+'px'}" @mousedown.stop>
    <li
      v-for="(item,index) in menuList"
      v-show="!item.hide"
      :key="index"
      :class="{'no-enable':!item.enable, 'active': index === activeIndex}"
      @mousemove.stop="closeMenuMove(index)"
      @mouseup.stop="closeMenu(index)"
    >
      <div @mousemove.stop>
        <span>{{ item.label }}</span>
        <p v-if="[3, 4].includes(index)" class="d-flex flex-column a-center j-center textAlign" :class="{'showtextAlign':showtextAlign}">
          <template v-if="activeIndex === 3">
            <span @mouseup.stop="closeMenu(activeIndex,'up')">上</span>
            <span @mouseup.stop="closeMenu(activeIndex,'down')">下</span>
          </template>
          <template v-if="activeIndex === 4">
            <span @mouseup.stop="closeMenu(activeIndex,'left')">左</span>
            <span @mouseup.stop="closeMenu(activeIndex,'right')">右</span>
          </template>
          <!-- <span @mouseup.stop="closeMenu(index,'left')">居左</span>
          <span @mouseup.stop="closeMenu(index,'center')">居中</span>
          <span @mouseup.stop="closeMenu(index,'right')">居右</span> -->
        </p>
      </div>
    </li>
  </ul>
</template>
<!--
      -->
<script>
export default {
  props: {
    menuList: {
      type: Array,
      default: () => [] // {label:'菜单名',enable：true/false,hide:false}
    }
  },
  data() {
    return {
      isShow: false,
      x: 0,
      y: 0,
      callback: null, // 回调方法,
      showtextAlign: false,
      text: '',
      activeIndex: -1
    }
  },
  created() {
    this.$nextTick(() => {
      document.removeEventListener('mouseup', this.hideMenu, false)
      document.addEventListener('mouseup', this.hideMenu, false)
    })
  },
  destroyed() {
    document.removeEventListener('mouseup', this.hideMenu, false)
  },
  methods: {
    open(event, callback) {
      const width = document.documentElement.clientWidth
      const height = document.documentElement.clientHeight
      this.isShow = true
      this.activeIndex = -1
      this.$nextTick(() => {
        const menuWidth = this.$refs.menu.offsetWidth
        const menuHeight = this.$refs.menu.offsetHeight
        this.x = event.x + menuWidth > width ? event.x - menuWidth : event.x
        this.y = event.y + menuHeight > height ? event.y - menuHeight : event.y
      })
      this.callback = callback
    },
    hideMenu() {
      this.isShow = false
      this.showtextAlign = false
    },
    closeMenuMove(clickNum, val) {
      if (!val)	this.activeIndex = clickNum
      if ([3, 4].includes(clickNum) && !this.showtextAlign && !val) {
        this.showtextAlign = true
        return
      }
    },
    closeMenu(clickNum, val) {
      const isEnableCall = (this.menuList[clickNum] && this.menuList[clickNum].enable)
      if (clickNum === undefined || isEnableCall) {
        this.isShow = false
        this.showtextAlign = false
      }
      if ([3, 4].includes(this.activeIndex) && !val) return

      if (isEnableCall && clickNum !== null && typeof this.callback === 'function') {
        this.callback(this.menuList[clickNum].code, val)
      }
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
	.no-enable{
		color:#8F8F8F !important;
		cursor: default !important;
		&:hover{
			background-color: #fff !important;
			background-image: none !important;
		}
	}
	.right-key-menu{
		display: inline-block;
		position: fixed;
		left:0;
		top:0;
		// min-width:120px;
		padding: 8px 0;
		margin: 2px 0 0;
		font-size: 14px;
		text-align: left;
		border-radius: 3px;
		border: 1px solid rgba(0,0,0,.15);
		list-style: none;
		box-shadow: 0 6px 12px rgba(0,0,0,.175);
		user-select: none;
		display: inline-block;
		min-width:120px;
		text-rendering: auto;
		z-index:9999999999;
    background-color: #fff;
		-webkit-font-smoothing: antialiased;
		li{
			padding:4px 12px;
			color: #333;
			cursor: pointer;
			&.active{
				background-color: #e8e8e8;
				background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
				background-repeat: repeat-x;
				color: #262626;
				text-decoration: none;
			}
		}
    .textAlign{
      position: absolute;
      right: -120px;
      top: 40px;
      bottom: auto;
      border: 1px solid rgba(0,0,0,.15);
      min-width: 120px;
			color: #333;
			cursor: pointer;
      background-color: #fff;
      line-height: 25px;
      display: none;
      span{
			cursor: pointer;
      width: 100%;
      text-align: center;
        &:hover{
					background-color: #e8e8e8;
					background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
					background-repeat: repeat-x;
					color: #262626;
					text-decoration: none;
        }
      }
    }
    .showtextAlign{
      display: block;
      display: flex;
    }
	}
</style>
